<template>
	<div class="">
		<!--<base-header></base-header>-->
		<input v-model="title" class="put-title" type="text" placeholder="此处填写需要咨询的问题（20个字以内）" maxlength="20" name="" id="" value="" />
		<textarea v-model="content" class="put-content" placeholder="此处填写问题的详细描述......" name="" rows="" cols=""></textarea>
		<!--put_questin-->
		<div class="put_question">
			<span @click="public">发布问题</span>
		</div>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">尚未登录</h4>
					</div>
					<div class="modal-body">
						是否前往登录界面？
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button @click="go" type="button" class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	export default {
		name: 'PutQuestion',
		components: {
			BaseHeader
		},
		data() {
			return {
				uid: '',
				token: '',
				title: '',
				content: ''
			}
		},
		mounted() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
		},
		methods: {
			//发布问题
			public() {
				if(this.uid) {
					var self = this;
					var data = {
						uid: self.uid,
						token: self.token,
						title: self.title,
						content: self.content
					};
					$.post(global.domain + global.API.sns_question_save, data, function(msg) {
						if(msg.error == 0) {
							self.title = '';
							self.content = '';
							var pName = localStorage.getItem('pname');
							self.$router.push({
								path: '/talk',
								query: {
									pName: pName
								}
							})
						} else {
							self.$layer.alert(msg.error_msg);
							console.log(msg.error);
							if(msg.is_auth == 0) {
								localStorage.clear();
								self.$router.push({
									path: '/login'
								});
							}
						}
					}, 'json');
				} else {
					$('#myModal').modal('toggle');
					//					this.$router.push({
					//						path: '/login'
					//					});
				}
			},
			go() {
				$('#myModal').modal('toggle');
				this.$router.push({
					path: '/login'
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.put-title,
	.put-content {
		width: 100%;
		padding: 10px;
		background-color: #fff;
		border: none;
		outline: none;
		color: #bbb;
	}
	
	.put-title {
		margin: 10px 0;
	}
	
	.put-content {
		min-height: 500px;
		resize: none;
	}
	
	.put_question {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		background-color: #f7f7f7;
		border-top: 1px solid #dbdbdb;
		padding: 10px 0;
	}
	
	.put_question span {
		color: #FFFFFF;
		background-color: #37B48A;
		padding: 5px 45px;
		display: inline-block;
	}
</style>